<template>
  <div class="myMessage">
      <a-tabs default-active-key="1" size="large">
      <a-tab-pane key="1" tab="我的消息">
        <div style="overflow: hidden">
          <ul>
            <li v-for="(item,index) in myMessageList" :key="index">
              <img src="@/assets/image/enterprise/bell.png" alt="">
              <div>
                <p class="title">{{item.title}} <span class="txt1">{{item.createDate}}</span></p>
                <p class="txt2">{{item.content}}</p>
              </div>
            </li>
          </ul>
          <!-- 分页器 -->
          <a-pagination
            style="text-align: center; margin-top: 30px"
            v-model="pageIndex"
            :total="total"
            :hideOnSinglePage="true"
            :pageSize="pageSize"
            @change="changePagin"
            show-less-items
          />
          <a-empty
              :image="imgUrl"
              :image-style="{
              height: '220px',
              }"
              style="margin: 0 auto; margin-top: 30px"
              v-if="myMessageList.length == 0 && flag"
          />
        </div>
      </a-tab-pane>
    </a-tabs>
    <Loading v-show="onLoading"></Loading>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgUrl: require("@/assets/image/pagint.png"),
      total:0,
      pageSize:6,
      pageIndex:1,
      myMessageList:[
        {createDate:'2010-09-10',title:'【官方通知】',content:'活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应用场景、服务需求，拓宽创业就业领域，鼓励残疾人、残疾人家庭成员。活动通过发现适宜残疾人、残疾人家庭参与的行业赛道。'},
        {createDate:'2010-09-10',title:'【官方通知】',content:'活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应用场景、服务需求，拓宽创业就业领域，鼓励残疾人、残疾人家庭成员。活动通过发现适宜残疾人、残疾人家庭参与的行业赛道。'},
      ],
      flag:false,
      onLoading:false
    };
  },
  mounted(){

  },
  methods:{


  }
}
</script>

<style lang="less" scoped>
  li:nth-last-child(1){
    border-bottom:0;
  }
  li{
    display: flex;
    width: 910px;
    padding: 14px 20px;
    border-bottom: 1px solid #E6E6E6;
    img{
      margin-right: 16px;
      margin-top: 3px;
      width: 32px;
      height: 32px;
    }
    .title{
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #1A1A1A;
    }
    .txt1{
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
    }
    .txt2{
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 22px;
      margin-top: 5px;
    }
    .time{
      display: flex;
      margin-top: 8px;
      .timetext{
        margin-right: 56px;
        color: #999999;
        font-size: 14px;
        line-height: 20px;
      }
      .detail{
        color: #FFBE37;
        font-size: 13px;
        line-height: 18px;
        cursor: pointer;
      }
    }
  }
</style>
